
<template>
  <div class="detailed-gender-out">
    <el-select v-model="value" placeholder="选择年份" style="width: 200px">
      <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          :disabled="item.disabled"
      />
    </el-select>
    <div class="detailed-item" id="detailed-age-main">
    </div>
  </div>
</template>

<style scoped>

</style>

<script setup>
import * as echarts from 'echarts';
import {onMounted, ref, watch} from "vue";
import {useDetailedStore} from "@/store/useDetailedStore.js";
import {detailedAgeEvent} from "@/consts/eventName.js";
import {getFemaleAge, getMaleAge} from "@/api/age.js";
import theme from "../../../../static/theme/walden.json"

let chartDom
let myChart
let option;

let detailedStore = useDetailedStore()

let options = []
let value = ref('')
let data

for (let i = 2002; i < 2024; i++) {
  options.push({
    value: i,
    label: i+'年',
  })
}

onMounted(()=>{

  detailedStore.detailedLoadFlag.set(detailedAgeEvent,true)
  data = detailedStore.detailedData.get(detailedAgeEvent)

  chartDom = document.getElementById('detailed-age-main');
  myChart = echarts.init(chartDom,theme);

  option = createOption(data)

  option && myChart.setOption(option);
})

watch(value,(newValue)=>{
  getAgeByYear(newValue,chartDom,myChart)
})


function getAgeByYear(year,chartDom,myChart){
  getMaleAge(year).then((value)=>{

    if (value.data.code === 404){
      alert("没有该年数据")
    }

    let data = value.data
    let yAxisData = []
    let maleData = []

    data.forEach((item)=>{
      const jsonMap = new Map(Object.entries(item));
      yAxisData.push(jsonMap.keys().next().value)
      maleData.push(jsonMap.values().next().value)
    })

    return {
      yAxisData:yAxisData,
      maleData:maleData
    }
  }).then((valueOut)=>{
    let femaleData = []

    getFemaleAge(year).then((value)=>{
      let data = value.data

      data.forEach((item)=>{
        const jsonMap = new Map(Object.entries(item));
        femaleData.push(jsonMap.values().next().value * -1)
      })
      return {
        yAxisData:valueOut.yAxisData,
        maleData:valueOut.maleData,
        femaleData:femaleData
      }
    }).then((value)=>{
      option = createOption(value)
      option && myChart.setOption(option);
    })
  })
}


function createOption(value){
  return {
    title: {
      text: '人口金字塔',
      left: "center"
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      formatter: function (params) {
        return params[0].name + '<br/>' +
            params[0].seriesName + ': '   + Math.abs(params[0].data).toFixed(2) + '%' + '<br/>' +
            params[1].seriesName + ': '  + Math.abs(params[1].data).toFixed(2) + '%';
        // 提示框内容格式化函数，params参数包含了鼠标悬停时的数据
      }
    },
    xAxis: {
      type: 'value',
    },
    yAxis: {
      type: 'category',
      data: value.yAxisData,
      show: true
    },
    legend:{
      data:["男性","女性"],
      right:10
    },
    series: [
      {
        name: '男性',
        type: 'bar',
        stack: 'total',
        // itemStyle: {
        //   color: '#5793f3'
        // },
        data: value.maleData
      },
      {
        name: '女性',
        type: 'bar',
        stack: 'total',
        // itemStyle: {
        //   color: '#d14a61'
        // },
        data: value.femaleData
      }
    ]
  };
}







</script>